<div class="flex-vertical absolute-fill content-margin edit-time-series">
    <div class="flex-horizontal flex-shrink-0 document-header">
        <div class="documentId">
            <a class="obj-name on-base-background" data-bind="text: documentId, attr: { title: 'Go to document: ' + documentId(), href: urlForDocument }"></a>
        </div>
        <i class="icon-arrow-right margin-left margin-right"></i>
        <div class="btn-group-label" data-label="Time Series">
            <div class="dropdown dropdown-right">
                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                    <span data-bind="text: timeSeriesNameText"></span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" data-bind="foreach: timeSeriesList">
                    <li><a href="#" data-bind="text: $data.nameAndNumberFormatted, click: _.partial($root.currentSeriesWasChanged, $data.name())"></a></li>
                </ul>
            </div>
        </div>
        <small class="margin-left">
            <span data-bind="visible: !isRollupTimeSeries()" class="no-wrap">
                <label class="control-label">This is raw data</label>
                <a class="raw-data-info" data-toggle="tooltip"><i class="icon-info text-info margin-left margin-left-xs"></i></a>
            </span>
            <span data-bind="visible: isRollupTimeSeries" class="no-wrap">
                <label class="control-label">Data generated by <a data-bind="attr: { 'href': urlForTimeSeriesPolicies() }">Time Series Policies</a></label>
                <a class="rollups-info" data-toggle="tooltip"><i class="icon-info text-info margin-left margin-left-xs"></i></a>
            </span>
        </small>
        <div class="flex-separator"></div>
        <small class="bg-warning text-warning padding padding-xs" data-bind="visible: hasMoreThanFiveRawValues()">
            <i class="icon-warning"></i>
            <span>Entries in this time series have more than 5 values. No data will be generated by the <a data-bind="attr: { 'href': urlForTimeSeriesPolicies() }">Rollup Policies.</a></span>
        </small>
    </div>
    <div class="flex-horizontal flex-shrink-0">
        <div class="btn-bar toolbar">
            <div class="btn-group">
                <button class="btn btn-primary" type="button" 
                        data-bind="click: _.partial($root.createTimeSeries, false), attr: { title: 'Add a new entry to time series ' + timeSeriesName()}, requiredAccess: 'DatabaseReadWrite'">
                    <i class="icon-plus"></i>
                    <span>New Entry</span>
                </button>
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-bind="requiredAccess: 'DatabaseReadWrite'">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#" data-bind="click: _.partial($root.createTimeSeries, true)">
                            <i class="icon-plus"></i> <span>Add new Time Series</span>
                        </a>
                    </li>
                </ul>
            </div>
            <button class="btn btn-danger" type="button" data-bind="click: deleteTimeSeries, enable: canDeleteSelected, requiredAccess: 'DatabaseReadWrite'">
                <i class="icon-trash"></i>
                <span data-bind="text: deleteButtonText"></span>
            </button>
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-bind="enable: itemsSoFar()">
                    <i class="icon-graph"></i>
                    <span>Plot</span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li data-bind="click: plotTimeSeries">
                        <a href="#" title="Plot time series as raw data (w/o any grouping)">
                            <span>Raw data</span>
                        </a>
                    </li>
                    <li data-bind="click: _.partial(plotGroupedTimeSeries, '1s')">
                        <a href="#" title="Plot time series grouped by seconds">
                            <span>Grouped by seconds</span>
                        </a>
                    </li>
                    <li data-bind="click: _.partial(plotGroupedTimeSeries, '1m')">
                        <a href="#" title="Plot time series grouped by minutes">
                            <span>Grouped by minutes</span>
                        </a>
                    </li>
                    <li data-bind="click: _.partial(plotGroupedTimeSeries, '1h')">
                        <a href="#" title="Plot time series grouped by hours">
                            <span>Grouped by hours</span>
                        </a>
                    </li>
                    <li data-bind="click: _.partial(plotGroupedTimeSeries, '1d')">
                        <a href="#" title="Plot time series grouped by days">
                            <span>Grouped by days</span>
                        </a>
                    </li>
                    <li data-bind="click: _.partial(plotGroupedTimeSeries, '1mon')">
                        <a href="#" title="Plot time series grouped by months">
                            <span>Grouped by months</span>
                        </a>
                    </li>
                    <li data-bind="click: _.partial(plotGroupedTimeSeries, '1quarter')">
                        <a href="#" title="Plot time series grouped by quarters">
                            <span>Grouped by quarters</span>
                        </a>
                    </li>
                    <li data-bind="click: _.partial(plotGroupedTimeSeries, '1year')">
                        <a href="#" title="Plot time series grouped by years">
                            <span>Grouped by years</span>
                        </a>
                    </li>
                </ul>
            </div>
            <button data-bind="click: openFilterDialog, attr: { class: 'btn btn-default' + (hasFilter() ? ' active' : '') }">
                <i class="glyphicon glyphicon-filter"></i>
                <span class="margin-left margin-left-xs">Filter</span>
            </button>
            <small class="btn-group margin-left" data-bind="html: filterText"></small>
        </div>
    </div>
    <div class="flex-grow utc-info-container">
        <div class="scroll-stretch">
            <div class="panel">
                <virtual-grid class="resizable" params="controller: gridController, emptyTemplate: 'empty-time-series-template'"></virtual-grid>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="empty-time-series-template">
    No entries for now.
</script>

<div class="tooltip json-preview lg js-time-series-tooltip" style="opacity: 0">
</div>
